<template>
	<view class="integral">
		<view class="top">
			<view class="intSum">
				总积分：{{score}}
			</view>
			<view class="intBox">
				<u-button type="success" text="充值积分" size="small" @click="inteClick"></u-button>
			</view>

		</view>
		<view class="list">
			<view class="title">
				积分列表
			</view>
			<u-empty text="暂无列表哦~~" mode="list" v-if="myData.length==0" margin-top='50'></u-empty>
			<view class="content" v-for="i in myData">
				<view class="info">
					<view class="left">
						{{i.memo}}
					</view>
					<view class="jf">
						{{i.score}}积分
					</view>
				</view>
				<view class="time">
					{{i.createtime}}
				</view>
			</view>
			<view class="noMore" v-if="last_page==list.page&&myData.length!=0" style="text-align: center;color: #797575;margin-top: 20rpx;">
				数据加载完成...
			</view>
		</view>
		<u-popup :show="showPop" mode="bottom" height="400px">
			<view class="p-3">
				<view class="title" style="text-align: center;margin-bottom: 10px;">
					请选择充值金额
				</view>
				<view class="MoneyL">
					<view class="chooseMoney" :class="{active: item.enough == enough}"
						v-for="(item,index) in moneyList" @click="chooseMoney(item,item.enough)"  >
						<view class="" style="font-size: 13px;">
							充值<text style="font-size: 19px;color:red">{{item.enough}}</text>元
						</view>
						<view class="" style="font-size: 12px;">
							赠送{{item.level_name}}{{item.day}}天
						</view>
					</view>
				</view>
				
				
				<!-- <scroll-view scroll-y="false" style="height: 300rpx;">
					<u--form :model="form" ref="uForm">
						<u-form-item label="充值金额(元)" prop="amount" labelWidth="100">
							<u-input v-model="form.amount" type="number" />
						</u-form-item>
					</u--form>
					<view class="" style="margin-top: 15px;color: #979797;">
						提示：充值500，赠送黄金会员30天
						<!-- {{sysConfig.integral_info[0].integral}}个积分 -->
				<!-- 	</view>
				</scroll-view> -->
				<view class="f-row jc-sb">
					<view style="width: 40%;">
						<u-button text="取消" type='info' @click='refuse'></u-button>
					</view>
					<view style="width: 40%;">
						<u-button text="同意" type='primary' @click="submit"></u-button>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		weChatPay,
		myIntegralList,
		systemConfig,
		rechargeList,
	} from '@/request/api.js'
	export default {
		data() {
			return {
				enough: '',
				showPop: false,
				form: {
					amount: '',
				},
				list:{
					page:1
				},
				color: false,
				moneyList:[],
				myData:[],
				score:0,//总积分
				sysConfig:null,
				last_page:1,
				amount:0,
				rules: {
					amount: [{
							required: true,
							message: '请输入金额',
							trigger: ['blur', 'change'],
							pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
						},
						{
							pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
							message: '只能包含字母或数字'
						},
					]
				}
			};
		},
		onLoad(){
			this.getIntegList()
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
			this.getIntegList()
			this.getConfig()
		},
		onReachBottom() {
			// this.$refs.community.reachBottom()
			console.log('到达底部')
			// console.log(this.form.page,this.last_page)
			if (this.list.page < this.last_page) {
				this.list.page= this.list.page + 1
				this.getIntegList()
			}
		},
		methods: {
			rechargeList(){
				rechargeList().then(res=>{
					this.moneyList = res.data
				})
			},
			getConfig(){
				systemConfig().then(res=>{
					// console.log(res)
					this.sysConfig = res.data
				})
			},
			chooseMoney(e,value){
				if(value == this.enough){
					this.enough = ''
				}else{
					this.enough = value
				}
				console.log(e,'eeeee')
				this.amount = e.enough
			},
			getIntegList(type){
				myIntegralList(this.list).then(res=>{
					
					this.myData = type == 'member'? res.data.list: this.myData.concat(res.data.list)
					// this.list1 = this.list1.concat(res.data.list)
					this.last_page=Math.ceil(res.data.total/10)
					this.score = res.data.score
				})
			},
			inteClick() {
				this.showPop = true
				this.rechargeList()
			},
			submit() {	
				weChatPay({
					type:3,
					amount:this.amount,
				}).then(res=>{
					console.log(res.data,'data');
					uni.requestPayment({
						"timeStamp": res.data.timeStamp,
						"nonceStr": res.data.nonceStr,
						"package": res.data.package,
						"signType": "MD5",
						"paySign": res.data.paySign,
						success: (res) => {
							this.showPop = false
							this.getIntegList('member')
						}, // 支付成功
						fail: (err) => {}, // 支付失败
					})
				})
				// this.$refs.uForm.validate().then(res => {
				// 	let self = this
				// 	weChatPay({
				// 		amount: this.form.amount,
				// 		type: 3
				// 	}).then(res => {
				// 		console.log(res)
				// 		uni.requestPayment({
				// 			"timeStamp": res.data.timeStamp,
				// 			"nonceStr": res.data.nonceStr,
				// 			"package": res.data.package,
				// 			"signType": "MD5",
				// 			"paySign": res.data.paySign,
				// 			success: (res) => {
				// 				self.showPop = false
				// 				self.getIntegList()
				// 			}, // 支付成功
				// 			fail: (err) => {}, // 支付失败
				// 		})
				// 	})
				// }).catch(errors => {
				// 	uni.$u.toast('输入金额')
				// })
			},
			refuse() {
				this.showPop = false
			}
		}

	}
</script>

<style lang="scss" scoped>
	::v-deep .title .u-form-item__body__left__content__label {
		color: #00C777 !important;
	}
	.MoneyL{
		background:#fff;
	}
	.chooseMoney{
		width: 30%;
		height: 44px;
		text-align: center;
		display: inline-block;
		margin-right: 6px;
		padding: 16px 2px;
		margin-bottom: 5px;
		background: #f9f9f9;
	}
	.active{
		width: 30%;
		height: 44px;
		text-align: center;
		display: inline-block;
		margin-right: 6px;
		padding: 16px 2px;
		margin-bottom: 5px;
		background: #ffe8d9;
	}
	.integral {
		min-height: 100vh;
		background-color: #f5f5f5;
		.top {
			display: flex;
			background-color: #00C777;
			height: 50px;
			color: #fff;
			line-height: 50px;
			align-items: center;

			.intSum {
				flex: 1;
				margin-left: 30rpx;
			}

			.intBox {
				width: 100px;
				margin-right: 40px;
			}
		}

		.list {
			margin-top: 15px;
			display: flex;
			flex-direction: column;

			.title {
				color: #4F4F4F;
				text-align: center;
			}

			.content {
				display: flex;
				background: #fff;
				justify-content: center;
				flex-direction: column;
				padding: 10rpx 15rpx;
				margin-top: 15rpx;

				.info {
					display: flex;
					margin: 10rpx 0;

					.left {
						flex: 1;
					}

					.jf {
						color: #00C777;
						width: 20%;
						text-align: right;
					}
				}

				.time {
					margin: 10rpx 0;
					color: #979797;
					text-align: right;
				}
			}
		}
	}
</style>
